<template>
	<view class="box">
		<view class="header">
			<view class="row">
				<!-- 	<view class="header_row" v-for="(item,index) in list" :key="index">
					<view :class="[active == index ? 'active': '']" @click="changeActive(index)">
						{{ item.title }}
					</view>
					<u-icon name="arrow-down" size="16"></u-icon>
				</view> -->
				<view class="icon" v-show="isSearch">
					<uniDataSelect :value="value" placeholder="请选择支付状态" :localdata="houseKeyRange" @change="changehouseType"
						:clear="false"></uniDataSelect>
				</view>
				<view class="icon" v-if="tag == 'all'">
					<uniDataSelect :value="name" placeholder="请选择小区":localdata="communityList" @change="changCommunityType"
						:clear="false"></uniDataSelect>
				</view>
				<u--text text="逾期账单" align="right" v-if="tag == 'overdue'"></u--text>
				<u--text text="待收账单" align="right" v-if="tag == 'currmothNoPayNoOver'"></u--text>
				<u--text text="本月应收" align="right" v-if="tag == 'currmoth'"></u--text>
				<u--text text="本月待收" align="right" v-if="tag == 'currmothNoPay'"></u--text>
			</view>

		</view>
		<u-overlay :show="maskShow" @click="changeMask">
			<view class="option_box">
				<view class="option">
					<u-cell-group>
						<!-- 	<u-cell icon="setting-fill" title="个人设置"></u-cell>
							<u-cell icon="integral-fill" title="会员等级" value="新版本"></u-cell> -->
						<u-cell v-for="(item, index) of list[active || 0].children" :title="item.name"
							@click="sliceHouse"></u-cell>
					</u-cell-group>
				</view>
			</view>
		</u-overlay>
		<view class="padding">
			<view class="total">
				<!-- <u-icon size="18" name="rmb-circle-fill" color="#b3b3b4"></u-icon> -->
				<!-- 账单总金额￥{{money}}(共{{qi}}笔) -->
			</view>
			<view class="card" v-for="(leaseTtem,leaseIndex) in leaseList" :key="leaseIndex"
				@click="itemDetail(leaseTtem)">
				<view class="card_row">
					<view class="title" style="width: 70%;display: flex;">
						<!-- 租金({{date}}个月) -->
						<view style="margin-right: 10rpx;">
							本期账单金额
						</view>
						<u-tag text="未支付" shape="circle" plain  type="error" size="mini" v-if="leaseTtem.payStatus == 0"></u-tag>
						<u-tag text="已支付待确认" shape="circle" plain  type="warning" size="mini"  v-if="leaseTtem.payStatus == 1"></u-tag>
						<u-tag text="已确认" shape="circle" plain type="info" size="mini"  v-if="leaseTtem.payStatus == 2"></u-tag>
					</view>
					
					<view class="title" style="width: 30%; text-align: right;">
						￥{{leaseTtem.billAmount || '0'}}
					</view>
				</view>

				<view class="card_title">
					<view class="tiem">
						约定提前收租日期:{{leaseTtem.receivableDate}}
					</view>
					<view class="tab" v-if="leaseTtem.overdueDays!=0">
						逾期{{leaseTtem.overdueDays}}天
					</view>
					
				</view>
				<u-line></u-line>
				<view class="card_row">
					<view class="" style="width: 70%;">
						<!-- {{leaseTtem.building_number}} -->
						{{leaseTtem.houseName}}
					</view>
					<view class="" style="width: 30%; text-align: right;">
						<!-- {{leaseTtem.tenantName}} -->
					</view>
				</view>
			</view>

		</view>

		<view style="margin-top: 120rpx;" v-if="leaseList.length==0">
			<u-empty mode="data" text="暂无账单数据"></u-empty>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import uniDataSelect from "@/uni_modules/uni-select/index/index.vue";
	import {
		getSelectHouseBill,
		getSelectCommunityName,
		getSelectCommunityEntity,
		getReceivable,
		getHousebill
	} from "@/api/my/index.js";
	export default {
		components: {
			uniDataSelect
		},
		data() {
			return {
				communityName:'',
				houseName: '',
				maskShow: false,
				active: undefined,
				qi: '7',
				date: '1',
				houseKey: '',
				houseKey2: '',
				tag: 'currmoth',
				billState:"", //账单状态
				payStatus: "", //支付状态
				houseKeyRange: [{
						value: 0,
						text: "未支付"
					},
					{
						value: 1,
						text: "已支付待确认"
					},
					{
						value: 2,
						text: "已确认"
					}
				],
				communityList: [],
				list: [{
						title: '本月待收',
						children: [{
							name: '逾期未付'
						}]

					},
					{
						title: '全部小区',
						children: [{
							name: '全部小区1'
						}, {
							name: '全部小区1'
						}, {
							name: '全部小区1'
						}]

					}
				],
				leaseList: [],
				isSearch: false //判断是否显示搜索款
			}
		},
		onLoad(options) {
			// options是传递过来的参数对象
			this.tag = options.tag
			
			//个人中心获取所有账单
			if (this.tag == 'all') {
				this.isSearch = true;
				this.selectCommunityName()
				this.selectHouseBill()
			}
			
			//全部逾期账单
			if (this.tag == 'overdue') {
				this.isSearch = false;
				//逾期未收
				this.billState = "1"
				this.selectHouseBill()
			}
			//全部待收账单
			if (this.tag == 'currmothNoPayNoOver') {
				this.isSearch = true;
				this.payStatus = "0"
				this.selectCommunityName()
				this.selectHouseBill()
			}
			//本月应收
			if (this.tag == 'currmoth') {
				this.isSearch = false;
				//本月应收
				this.shouldMonth()
			}
			//本月逾期
			if (this.tag == 'currmothNoPay') {
				this.isSearch = false;
				//本月待收含逾期
				this.treatMonth()
			}
		},
		mounted() {
			// this.selectHouse()

		},
		methods: {
			changehouseType(value) {
				// this.value = value;
				this.payStatus = value
				this.selectHouseBill()
			},
			changCommunityType(value) {
				console.log(value);
				this.communityName = value;
				this.selectHouseBill()
			},
			//账单管理
			// async selectHouse() {
			// 	const res = await getSelectHouseBill({
			// 		billState: this.value,  
			// 		payStatus: '', // 
			// 		communityName: '' 
			// 		// "billState": "", //0正常1逾期
			// 		// "payStatus": "", //支付状态0未支付，1已支付待确认，2已确认
			// 		// "communityName": "花桥裕花园" //小区名称
			// 	})
			// 	if (res.data.code == 200) {
			// 		this.leaseList = res.data.data;

			// 	} else {
			// 		this.$refs.uToast.show({
			// 			message: res.data.msg,
			// 			type: 'error'
			// 		})
			// 	}
			// },
			
			//账单管理
			async selectHouseBill() {
				const res = await getSelectHouseBill({
					billState: this.billState, //账单状态（1已逾期）
					payStatus: this.payStatus, //支付状态（1已支付）
					communityName: this.communityName //小区名称字符
				})
				if (res.data.code == 200) {
					this.leaseList = res.data.data;
				} else {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
				}
			},
			//所有小区
			async selectCommunityName() {
				const res = await getSelectCommunityEntity()
				if (res.data.code == 200) {
					res.data.data.map((item)=>{
						let community = {
							value: item.name,
							text: item.name
						}
						this.communityList.push(community)
					})
					console.log(this.communityList,11111)
				}
			},
			//本月待收
			async treatMonth(){
				const res = await getHousebill()
				if (res.data.code == 200) {
					this.leaseList = res.data.data;
				
				} else {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
				}
			},
			//本月应收
			async shouldMonth(){
				const res = await getReceivable()
				if(res.data.code == 200){
					if (res.data.code == 200) {
						this.leaseList = res.data.data;
					} else {
						this.$refs.uToast.show({
							message: res.data.msg,
							type: 'error'
						})
					}
				}
			},
			itemDetail(leaseTtem) {
				console.log(leaseTtem,2222222222)
				if(leaseTtem.payStatus ==  "2"){
					uni.navigateTo({
						url: './billDetail/billDetail?id=' + leaseTtem.id,
						animationType: this.animation.type,
						animationDuration: this.animation.time
					})
				}else {
					uni.navigateTo({
						url: './billDetail/debtCollection?id=' + leaseTtem.id,
						animationType: this.animation.type,
						animationDuration: this.animation.time
					})
				}

				
			},
			changeActive(index) {
				this.maskShow = true
				this.active = index
				// this.active = 
			},
			changeMask() {
				this.maskShow = false
				this.active = undefined
			},
			sliceHouse() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.active {
		color: #3c9cff;
	}

	.box {
		background-color: $pagebgc;
		min-height: 100vh;
		max-height: 100%;
		box-sizing: border-box;

		.header {
			.row {
				width: 100%;
				z-index: 99999999999999;
				padding: 30rpx;
				font-size: 28rpx;
				position: fixed;
				box-sizing: border-box;
				left: 0;
				background-color: #fff;
				border-bottom: #c8c8c8 solid 1rpx;
				@include flexBetween;
				color: $noimportant;

				.icon {
					width: 48%;
				}

				.header_row {
					display: flex;
					align-items: center;
					padding: 0 80rpx;
				}

				.data {
					display: flex;
					align-items: center;
				}
			}
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: black;
		}

		.card_title {
			@include flexBetween;
			padding: 0 30rpx 30rpx 30rpx;

			.tiem {
				width: 70%;
			}

			.tab {
				background-color: #f06868;
				color: #fff;
				padding: 5rpx 20rpx;
				font-size: 26rpx;
			}
		}

		.padding {
			padding:220rpx 30rpx 0rpx 30rpx;
			font-size: 28rpx;
			color: $noimportant;

			.total {
				@include flexCenter;
			}

			.card {
				background-color: #fff;
				border-radius: 3%;
				margin: 20rpx 0;
				@include boxshadow;

				.card_row {
					@include flexBetween;
					padding: 30rpx;
				}
			}

		}
	}
</style>